<template>
 <div>
   <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">订单管理</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/myorder'}">我的订单</el-breadcrumb-item>
    <el-breadcrumb-item>订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div class="Commodity">订单基本信息：</div>
      <el-row  :gutter="20">
        <el-col :span="10">
          <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <span icon-class="user" >
                  <span class="swit">订单id:</span>
                  <span class="pull-right">{{ this.detailsList.order.merchantId }}</span>
                </span>
              </li>
              <li class="list-group-item">
                <!-- <span icon-class="phone" >手机号码: -->
                  <span icon-class="user" >
                    <span class="swit">付款方式:</span>
                    <span class="pull-right">{{ this.detailsList.order.paymentMethod }}</span>
                  </span>
                </span>
              </li>
              <li class="list-group-item">
                 <span icon-class="user" >
                     <span class="swit">付款金额:</span>
                  <span class="pull-right">{{ this.detailsList.order.paymentMoney }}</span>
                </span>
              </li>
            </ul>
        </el-col>
         <el-col :span="10">
           <ul>
              <li class="list-group-item">
                <span icon-class="user" >
                   <span class="swit">订单备注:</span>
                  <span class="pull-right">{{ this.detailsList.order.orderRemark }}</span>
                </span>
              </li>
              <li class="list-group-item">
                <span icon-class="user" >
                  <span class="swit">订单凭证:</span>
                  <span class="pull-right">
                    <!-- {{ this.detailsList.order.paymentVoucher}} -->
                     <el-image style="width: 100px; height: 50px" :src="this.detailsList.order.paymentVoucher" fit="cover"></el-image>
                  </span>
                </span>
              </li>
              <li class="list-group-item">
                <span icon-class="user" >
                  <span class="swit">下单时间:</span>
                  <span class="pull-right">
                    {{ this.detailsList.order.paymentTime}}
                     <!-- <el-image style="width: 100px; height: 50px" :src="this.detailsList.order.paymentVoucher" fit="cover"></el-image> -->
                  </span>
                </span>
              </li>
              <!-- <li class="list-group-item">
                <span icon-class="user" >数量:
                  <span class="pull-right">{{ this.detailsList.order.merchantId }}</span>
                </span>
              </li> -->
           </ul>
         </el-col>
      </el-row>
      <div class="Commodity">商品信息：</div>
      <el-table  :data="detailsListArr"
        border
        empty-text="center"
        @selection-change="detailsListArr"
        >
         <el-table-column type="selection"  align="center"></el-table-column>
         <el-table-column  prop="pId"    label="商品id" > </el-table-column>
        <el-table-column  prop="pName"   label="商品名称" > </el-table-column>
         <el-table-column  prop="pPhoto"    label="商品图片" > </el-table-column>
          <el-table-column  prop="mName"    label="商品规格" > </el-table-column>
           <el-table-column  prop="uUnit"   label="商品单位" > </el-table-column>
            <el-table-column  prop="pNum"   label="商品数量" > </el-table-column>
      </el-table>
       <div class="Commodity">物流信息：</div>
    </el-card>
 </div>
</template>

<script>
export default {

  data () {
    return {
      props: ['id'],
      ids: '',
      detaForm: {},
      detailsList: [],
      detailsListArr: []
    }
  },
  created () {
    this.getdetail()
    // console.log(this.id)
    this.ids = this.$route.query.id
    // console.log(this.$route.query.id)
    console.log(this.ids)
  },
  methods: {
    async getdetail () {
      console.log(this.$route.query.id)
      this.detaForm = {
        orderNum: this.$route.query.id,
        token: window.sessionStorage.getItem('token')
      }
      var qs = require('qs')
      // const res = await this.$axios.post('api/myorder', { params: { token: window.sessionStorage.getItem('token') } })
      const res = await this.$axios.post('api/order_desc', qs.stringify(this.detaForm, { indices: false }))
      console.log(res.data.data)
      this.detailsList = res.data.data
      this.detailsListArr = res.data.data.orderDetails
      console.log(this.detailsList.order)
    }
  }

}
</script>

<style lang='less' scoped>
.el-card {
  margin-top: 15px;
}
.el-row .el-col {
  // text-align: center;
}
.el-row .el-col li {
  margin: 30px 0;
}
.el-breadcrumb-item {
  background-color: pink;
}
.user {
  font-size: 20px;
  font-weight: 900;
  vertical-align: middle
}
.el-image {
   vertical-align: middle
}
.Commodity {
  margin: 20px 0;
  font-size: 20px;
  font-weight: 900;
}
.swit {
  font-size: 18px;
  font-weight: 900;
  margin-right: 10px
}
.pull-righ {
  font-weight: 900
}
</style>
